<template>
  <header>
    <HeadView></HeadView>
  </header>

  <main class="login-container">
    <div class="login-wrapper">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-container">
          <h1 class="brand-title">
            <span class="brand-title-red">红</span>映雨
          </h1>
          <p class="brand-slogan">让生活多一份甜蜜</p>
          <div class="brand-description">
            <p>优质材料 · 严选把关</p>
            <p>新鲜速递 · 品质保证</p>
            <p>安全可靠 · 用心服务</p>
          </div>
        </div>
      </div>

      <!-- 右侧登录框 -->
      <div class="login-section">
        <div class="login-box">
          <form @submit.prevent="submitForm" class="login-form">
            <div class="form-header">
              <h2 class="admin-title">管理端登录</h2>
            </div>
            <label for="loginType" class="input-label">
            <div class="form-header">登录方式</div>

            <!-- 登录方式选择 -->
            <div class="input-group">
              <select id="loginType" v-model="loginType" class="input-field">
                <option value="1">账号密码</option>
                <option value="2">手机验证码</option>
              </select>
            </div>
            </label>

            <!-- 账号密码登录 -->
            <template v-if="loginType === '1'">
              <div class="input-group">
                <label for="name" class="input-label">用户名:
                  <input
                    id="name"
                    type="text"
                    v-model="name"
                    class="input-field"
                    placeholder="请输入用户名"
                  />
                </label>
              </div>
              <div class="input-group">
                <label for="password" class="input-label">密码:
                  <input
                    id="password"
                    type="password"
                    v-model="password"
                    class="input-field"
                    placeholder="请输入密码"
                  />
                </label>
              </div>
            </template>

            <!-- 手机验证码登录 -->
            <template v-if="loginType === '2'">
              <div class="input-group">
                <label for="phone" class="input-label">手机号:
                <input
                  id="phone"
                  type="tel"
                  v-model="phone"
                  class="input-field"
                  placeholder="请输入手机号"
                />
              </label>
              </div>
              <div class="input-group">
                <label for="code" class="input-label">验证码：
                <div class="verification-input">
                  <input
                    id="code"
                    type="text"
                    v-model="code"
                    class="input-field"
                    placeholder="请输入验证码"
                  />
                  <button
                    type="button"
                    :disabled="countdown > 0"
                    @click="send(phone)"
                    class="send-code-btn"
                  >
                    {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
                  </button>
                </div>
              </label>
              </div>
            </template>

            <button type="submit" class="submit-btn">登 录</button>
          </form>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <FootView></FootView>
  </footer>
</template>

<script>
import useTool from '../../public/static/js/tool'
import FootView from '../components/Foot.vue'

export default {
  name: 'LoginView',
  components: {
    FootView
  },
  data () {
    return {
      loginType: '2',
      name: '',
      password: '',
      phone: '',
      code: '',
      isSendingEmail: false,
      countdown: 0
    }
  },
  methods: {
    submitForm () {
      // 在这里处理表单提交逻辑，例如发送请求到后端进行登录
      if (this.loginType === '1') {
        this.$ajax.post('/admin/user/adminLogin', {
          loginType: this.loginType,
          name: this.name,
          password: this.password
        })
          .then((response) => {
            // 处理成功响应
            const res = response.data
            if (res.code === 0) {
              const { setLoginAdmin } = useTool()
              setLoginAdmin(res.data) // 存储数据
              this.$message.success(res.msg)
              this.$router.push('/')
            } else {
              this.$message.error(res.msg)
            }
          })
      } else {
        this.$ajax.post('/admin/user/adminLogin', {
          loginType: this.loginType,
          phone: this.phone,
          code: this.code
        })
          .then((response) => {
            // 处理成功响应
            const res = response.data
            if (res.code === 0) {
              const { setLoginAdmin } = useTool()
              setLoginAdmin(res.data) // 存储数据
              this.$message.success(res.msg)
              this.$router.push('/')
            } else {
              this.$message.error(res.msg)
            }
          })
      }
    },
    send (phone) {
      if (this.isSendingEmail) {
        this.$message.warning('短信已发送！')
        return
      }
      this.isSendingEmail = true
      this.$ajax.post('/user/sendCode', null, {
        params: {
          phone
        }
      })
        .then((response) => {
          const res = response.data
          if (res.code === 0) {
            this.$message.success(res.msg)
            this.countdown = 60
            this.startCountdown()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          alert(error.response.data.message || '请求失败，请稍后再试')
        })
        .finally(
          this.isSendingEmail = false
        )
    },
    startCountdown () {
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1
        } else {
          clearInterval(interval)
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
/* 修改布局样式 */
.login-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 1;
  gap: 80px;
  padding-top: 80px;
  padding-left: 100px;
}

/* 左侧品牌区域样式 */
.brand-section {
  flex: 0.8;
  max-width: 400px;
  padding: 40px 20px;
}

.brand-container {
  text-align: left;
  animation: fadeInLeft 0.8s ease-out;
}

.logo-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 30px;
}

.brand-logo {
  width: 240px;
  height: auto;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.logo-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.15) 48%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.15) 52%,
    transparent 55%
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

.logo-wrapper:hover .brand-logo {
  transform: scale(1.05);
}

@keyframes shine {
  0% {
    top: -50%;
    left: -50%;
  }
  100% {
    top: 150%;
    left: 150%;
  }
}

.brand-title {
  font-size: 48px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  letter-spacing: 3px;
}

.brand-title-red {
  color: #ff0000;
}

.brand-slogan {
  font-size: 24px;
  color: #666;
  margin-bottom: 40px;
  font-weight: 300;
  letter-spacing: 1px;
}

.brand-description {
  margin-top: 40px;
  font-size: 18px;
  color: #666;
  line-height: 2;
}

.brand-description p {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
}

.brand-description p::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #4a90e2;
}

/* 右侧登录框样式 */
.login-section {
  flex: 1;
  max-width: 380px;
  animation: fadeInRight 0.8s ease-out;
}

/* 添加新动画 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .login-wrapper {
    gap: 60px;
    padding-left: 50px;
  }
}

@media (max-width: 1024px) {
  .login-wrapper {
    padding-left: 20px;
  }

  .brand-section,
  .login-section {
    flex: 1;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .login-wrapper {
    padding-left: 0;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    width: 160px;
  }

  .brand-title {
    font-size: 36px;
  }

  .brand-slogan {
    font-size: 20px;
  }

  .brand-description {
    font-size: 16px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .brand-description {
    color: #bbb;
  }

  .brand-description p::before {
    color: #4a90e2;
  }
}

/* 布局样式 */
.login-container {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* 背景动画效果 */
.login-container::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.login-box {
  width: 380px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  animation: fadeInUp 0.8s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 表单样式优化 */
.input-group {
  margin-bottom: 20px;
  width: 100%;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: #333;
}

.input-field {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.input-field:hover {
  background: rgba(248, 249, 250, 1);
  border-color: #d0d7de;
}

.input-field:focus {
  border-color: #4a90e2;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.15),
              inset 0 2px 4px rgba(0, 0, 0, 0);
  transform: translateY(-1px);
  outline: none;
}

/* 验证码按钮样式 */
.code-group {
  display: flex;
  gap: 15px;
}

.code-input {
  flex: 1;
}

.code-btn {
  min-width: 130px;
  padding: 0 20px;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2);
}

.code-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3);
}

.code-btn:disabled {
  background: linear-gradient(135deg, #a0a0a0 0%, #858585 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 提交按钮样式 */
.submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  padding: 18px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2);
  margin-top: 30px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
  background: linear-gradient(135deg, #357abd 0%, #2868a9 100%);
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
  .login-container {
    background: linear-gradient(135deg, #1a1c20 0%, #2c3e50 100%);
  }

  .login-box {
    background: rgba(28, 32, 38, 0.95);
    border-color: rgba(255, 255, 255, 0.05);
  }

  .brand-title {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .brand-slogan {
    color: #bbb;
  }

  .input-label {
    color: #e2e8f0;
  }

  .input-label::before {
    background: #4a90e2;
    opacity: 1;
  }

  .input-field {
    background: rgba(40, 44, 52, 0.9);
    border-color: #3a3f4c;
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .input-field:hover {
    background: rgba(45, 50, 60, 0.95);
    border-color: #4a5568;
  }

  .input-field:focus {
    background: rgba(45, 50, 60, 1);
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2),
                inset 0 2px 4px rgba(0, 0, 0, 0);
  }

  .register-link a:hover {
    background: rgba(74, 144, 226, 0.15);
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .login-box {
    width: 100%;
    padding: 30px 25px;
    border-radius: 20px;
  }

  .brand-logo {
    width: 160px;
  }

  .brand-title {
    font-size: 32px;
  }

  .brand-slogan {
    font-size: 16px;
  }

  .input-field {
    padding: 14px 16px;
  }

  .submit-btn {
    padding: 16px;
    font-size: 16px;
  }
}

/* select输入框特殊样式 */
select.input-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234a90e2' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .input-field {
    background: rgba(40, 44, 52, 0.9);
    border-color: #3a3f4c;
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .input-field:hover {
    background: rgba(45, 50, 60, 0.95);
    border-color: #4a5568;
  }

  .input-field:focus {
    background: rgba(45, 50, 60, 1);
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2),
                inset 0 2px 4px rgba(0, 0, 0, 0);
  }

  .input-label {
    color: #e2e8f0;
  }

  .input-label::before {
    background: #4a90e2;
    opacity: 1;
  }

  select.input-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234a90e2' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  }
}

/* 修改表单样式 */
.form-header {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  text-align: left;
}

.input-group {
  margin-bottom: 20px;
}

.input-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  text-align: left;
}

.input-field {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

/* 验证码输入框和按钮的容器 */
.verification-input {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.verification-input .input-field {
  width: 100%;
  padding-right: 110px;
  border-radius: 4px 0 0 4px;
  border-right: none;
}

/* 发送验证码按钮 */
.send-code-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  min-width: 100px;
  padding: 0 12px;
  background: #4a90e2;
  color: white;
  border: 1px solid #ddd;
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.send-code-btn:hover:not(:disabled) {
  background: #357abd;
}

.send-code-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 品牌标题样式调整 */
.brand-title {
  font-size: 36px;
  color: #333;
  margin-bottom: 15px;
}

.brand-slogan {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

.brand-description {
  color: #666;
  line-height: 1.8;
}

.brand-description p {
  margin-bottom: 10px;
}

/* 登录框样式调整 */
.login-box {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-box {
    padding: 20px;
  }

  .brand-title {
    font-size: 28px;
  }

  .brand-slogan {
    font-size: 16px;
  }
}

/* 添加管理端标题样式 */
.admin-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .admin-title {
    color: #fff;
  }
}
</style>
